<template>
	<view class="content">
		<view class="search">
			<!-- 固定搜索框 -->
			<view class="search-box">
				<view class="search-box__bg">
					<image class="search-box__bg__icon" mode="widthFix" :src="$imgUrl('/index/search/icon-search.png')">
					</image>
					<input class="search-box__bg__inps" type="text" placeholder="搜索" v-model="searchVal">
					<view class="search-box__bg__line"></view>
					<view class="search-box__bg__cacel" @click="cancelOrSearch">{{ flag ? '取消' : '搜索' }}</view>
				</view>
			</view>

			<!-- 搜索历史记录 -->
			<view class="search-history" v-if="!flag">
				<view class="search-history__title">
					<view>最近搜索</view>
					<image @click="clearSearchList" class="search-history__icon" mode="widthFix"
						:src="$imgUrl('/index/search/icon-rabbish.png')"></image>
				</view>
				<view class="search-history__content">
					<view v-for="(item,index) in historyList" :key="index" @click="toSearchHistory(item)">
						{{ item }}
					</view>
				</view>
			</view>


		</view>
		<view style="width: 100vw;box-sizing: border-box;
			margin-top: 24rpx;">
			<!-- 列表 -->
			<goods-list :listData="listData" v-if="flag"></goods-list>
			<!-- 无搜索内容 -->
			<view v-if="flag && listData.length == 0" class="search-nodata">暂无相对应的搜索内容!</view>
		</view>
	</view>

</template>

<script>
	import goodsList from '@/components/goodsList.vue'
	export default {
		components: {
			goodsList
		},
		data() {
			return {
				searchVal: '', // 搜索内容
				historyList: [], // 历史搜索记录
				loadMore: false,
				pageNum: 1,
				pageSize: 20,
				listData: [],
				flag: false
			}
		},
		onLoad() {
			this.getHistoryList()
		},
		// 下拉刷新
		onPullDownRefresh() {
			if (this.flag) {
				uni.showNavigationBarLoading()
				this.refresh()
				uni.hideNavigationBarLoading()
				uni.stopPullDownRefresh()
			}
		},
		// 上拉加载更多
		onReachBottom() {
			if (this.loadMore && this.flag) {
				this.pageNum = this.pageNum + 1
				this.getList()
			}
		},
		methods: {
			// 搜索/取消
			cancelOrSearch() {
				if (!this.flag) {
					if (this.searchVal == '') {
						uni.showToast({
							title: '请输入搜索内容',
							icon: 'none',
							duration: 2000,
							mask: true
						});
						return
					}
					this.flag = true
					this.searchData()
				} else {
					this.searchVal = ''
					this.flag = false
				}
			},
			// 搜索方法
			searchData() {
				const list = uni.getStorageSync('historyList') || []
				list.unshift(this.searchVal)
				uni.setStorageSync('historyList', list)
				this.getHistoryList()
				this.refresh()
			},
			// 获取历史搜索列表(本地储存)
			getHistoryList() {
				const list = uni.getStorageSync('historyList')
				this.historyList = list
			},
			// 获取
			refresh() {
				this.loadMore = true
				this.listData = []
				this.pageNum = 1
				this.getList()
			},
			// 根据搜索内容keywords匹配列表
			async getList() {
				const data = await this.$apis.goods.goodsList({
					pageNum: this.pageNum,
					pageSize: this.pageSize,
					keywords: this.searchVal
				})
				this.listData = [...this.listData, ...data.rows]
				if (this.listData.length >= data.total) {
					this.loadMore = false
				}
			},
			// 点击历史搜索进行搜索
			toSearchHistory(item) {
				this.flag = true
				this.searchVal = item
				this.searchData()
			},
			// 清除历史记录
			clearSearchList() {
				let that = this
				uni.showModal({
					title: '',
					content: '确定要清空最近搜索吗？',
					confirmColor: '#FA5350',
					success: function(res) {
						if (res.confirm) {
							console.log('用户点击确定');
							uni.setStorageSync('historyList', [])
							that.historyList = []
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		width: 100vw;
		min-height: calc(100vh - 100rpx);
		background: #F6F6F6;
		padding-top: 100rpx;
	}

	.search {
		width: calc(100vw - 64rpx);
		padding: 0 32rpx;


		.search-box {
			width: 750rpx;
			height: 88rpx;
			background: #FFFFFF;
			position: fixed;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: center;

			.search-box__bg {
				width: 710rpx;
				height: 64rpx;
				background: #F5F5F5;
				border-radius: 32rpx;
				display: flex;
				align-items: center;
			}

			.search-box__bg__icon {
				width: 40rpx;
				height: 40rpx;
				margin-left: 24rpx;
			}

			.search-box__bg__inps {
				width: calc(100% - 40rpx - 15rpx - 24rpx - 2rpx - 70rpx - 60rpx);
				height: 64rpx;
				margin-left: 15rpx;
			}

			.search-box__bg__line {
				height: 28rpx;
				border: 2rpx solid #E2E2E2;
			}

			.search-box__bg__cacel {
				width: 70rpx;
				height: 44rpx;
				font-size: 32rpx;
				color: #3A414C;
				line-height: 44rpx;
				margin: 0 30rpx;
			}
		}

		.search-history {
			padding: 26rpx 0;

			.search-history__title {
				display: flex;
				align-items: center;
				justify-content: space-between;

				view {
					font-size: 28rpx;
					font-weight: bold;
					color: #333333;
				}

				.search-history__icon {
					width: 44rpx;
					height: 44rpx;
				}
			}

			.search-history__content {
				display: flex;
				align-items: center;
				flex-wrap: wrap;

				view {
					padding: 14rpx 24rpx;
					font-size: 24rpx;
					color: #333333;
					background: #F0F0F0;
					border-radius: 12rpx;
					margin-top: 32rpx;
					margin-right: 24rpx;
				}
			}
		}

		.search-nodata {
			font-size: 26rpx;
			color: #999999;
			text-align: center;
			padding-top: 100rpx;
		}
	}
</style>